<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员登陆</title>
    <link rel="stylesheet" href="__PUBLIC__/css/style.css">
    <link rel="stylesheet" href="__PUBLIC__/ele/index.css">
    <style type="text/css">
        #app {
            background: url("__PUBLIC__/img/login_bg.png") center center no-repeat;
            background-size: cover;
            min-height: 100vh;
            min-width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div id="app" v-cloak v-loading.fullscreen.lock="fullscreenLoading">
    <div class="login-form">
        <div class="login-header">
            登陆
        </div>
        <el-input placeholder="请输入用户名" suffix-icon="fa fa-user" v-model="loginInfo.username" size="small"
                  style="margin-bottom: 18px"></el-input>

        <el-input placeholder="请输入密码" suffix-icon="fa fa-keyboard-o" v-model="loginInfo.userpass" type="password"
                  size="small"
                  style="margin-bottom: 18px" @keyup.native.enter="login"></el-input>

        <el-button type="primary" :loading="loginLoading" size="small" style="width: 100%;margin-bottom: 18px"
                   @click.native="login">登录
        </el-button>
        <div>
            <el-checkbox v-model="loginInfo.remember">记住账号</el-checkbox>
        </div>

    </div>
</div>
<script src="__PUBLIC__/js/vue.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/babel.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/babel-polyfill.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/ele/index.js" type="text/javascript"></script>
<script type="text/babel">
    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                loginInfo: {
                    username: "",
                    userpass: "",
                    remember: false
                },
                loginLoading:false,
                fullscreenLoading:false
            }
        },
        methods: {
            login: function () {
                let APP = this;
                APP.loginLoading = true;
                $.ajax({
                    url: "./userLogin",
                    type: 'post',
                    data: APP.loginInfo,
                    success:function (res) {
                        if(res.code==200){
                            location.href=res.redirect
                        }else{
                            alert(res.msg)
                            APP.loginLoading = false;
                        }
                    }
                })
            }
        },
        created: function () {
            this.fullscreenLoading=true
        },
        mounted: function () {
            this.fullscreenLoading=false
        }
    })
</script>
</body>
</html>
